<template>
  <view>
      <view class="goods-list">
          <view class="goods-item">
             <view class="goods-left-box">
                <label class="radio" v-if="showRadio" @click="updateRadioState">
                  <radio value="" :checked="goodinfo.goods_state" color="#c00000" />
                </label>
                <image :src="goodinfo.goods_small_logo || defaultPic" mode=""></image>
             </view>
             <view class="goods-right-box">
                 <view class="goods-name">
                     {{ goodinfo.goods_name}}
                 </view>
                 <view class="goods-info-box">
                     <view class="goods-price">
                        ￥{{goodinfo.goods_price | toFixed}}
                     </view>
                     <uni-number-box :min="1" :value="goodinfo.goods_count" v-if="showNum" @change="changeNumHandle"></uni-number-box>
                 </view>
             </view>
          </view>
      </view>
  </view>
</template>

<script>
  export default {
    name:"my-goods",
    props:{
       goodinfo:{
          type:Object,
          default:{}
       },
       showRadio:{
         type:Boolean,
         default:false
       },
       showNum:{
         type:Boolean,
         default:false
       }
    },
    filters:{
       toFixed (num) {
          return Number(num).toFixed(2);
       }
    },
    data() {
      return {
         defaultPic:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
      };
    },
    methods:{
      updateRadioState () {
         this.$emit('radio-change', {
            goods_id:this.goodinfo.goods_id,
            goods_state:this.goodinfo.goods_state
         })
      },
      changeNumHandle (val) {
         this.$emit('num-change', {
           goods_id: this.goodinfo.goods_id,
           goods_count:val
         })
      }
    }
  }
</script>

<style lang="scss">
page {
    background-color: #fff;
}
.goods-item {
   display: flex;
   padding: 10px 5px;
   border-bottom: 1px solid #efefef;
   .goods-left-box {
     display: flex;
     align-items: center;
     margin-right: 10px;
     image {
       width: 100px;
       height: 100px;
     }
   }
   .goods-right-box {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      .goods-name {
        fonts-size:13px;
      }
      .goods-info-box {
         display: flex;
         justify-content: space-between;
        .goods-price {
          font-size: 16px;
          color: #c00000;
        }
      }
   }
}
</style>